<template>
	<view>
		<!-- 轮播图-商品多图展示 -->
		<view>
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" mode="round"
				:dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view class="swiper-item" :class="'swiper-item' + index">
							<image :src="item.url" style="width: 100%;" />
							<!-- <text style="color: #fff; font-size: 32px;">{{ index + 1 }}</text> -->
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<!-- 商品基本信息 -->
		<view>
			<uni-group mode="card">
				<view> 价格：￥500.00 </view>
				<view> 商品名称 </view>
			</uni-group>
		</view>

		<!-- 快递信息 -->
		<view>
			<uni-group mode="card">
				<view> 发货：包邮 </view>
				<view> 服务：正品保证 假一赔十 </view>
			</uni-group>
		</view>

		<!-- 商品介绍 -->
		<view>
			<uni-group title="商品介绍" mode="card">
				<view> 多图展示 </view>
				<view>
					<image src="../../static/logo.png" mode="scaleToFill" />
				</view>
				<view>
					<image src="../../static/logo.png" mode="scaleToFill" />
				</view>
			</uni-group>
		</view>

		<!-- 底部-收藏、加入购物车、立即购买 -->
		<view class="goods-carts">
			<uni-goods-nav :options="bottomOptions" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'


// 底部立即购买
const bottomOptions = [{
	icon: 'headphones',
	text: '客服'
}, {
	icon: 'shop',
	text: '店铺',
	// info: 2,  // 角标显示的数量
	infoBackgroundColor: '#007aff',
	infoColor: "red"
}, {
	icon: 'cart',
	text: '购物车',
	info: 2  // 角标显示的数量
}]
const buttonGroup = [{
	text: '加入购物车',
	backgroundColor: '#ff0000',
	color: '#fff'
},
{
	text: '立即购买',
	backgroundColor: '#ffa200',
	color: '#fff'
}
]

function onClick(e) {
	uni.showToast({
		title: `点击${e.content.text}`,
		icon: 'none'
	})
}
function buttonClick(e) {
	console.log(e)
	this.options[2].info++
}


// 轮播图
const current = ref(0) // let current = 0 [错误写法：不能实现双向绑定]
let dotsStyles = {
	backgroundColor: 'rgba(83, 200, 249,0.3)',
	border: '1px rgba(83, 200, 249,0.3) solid',
	color: '#fff',
	selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
	selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
}
let swiperDotIndex = 0
const info = [{
	colorClass: 'uni-bg-red',
	url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
	content: '内容 A'
},
{
	colorClass: 'uni-bg-green',
	url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
	content: '内容 B'
},
{
	colorClass: 'uni-bg-blue',
	url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
	content: '内容 C'
}
]
function clickItem(e) {
	swiperDotIndex = e
}

// 轮播图-切换
function change(e) {
	current.value = e.detail.current
	console.log(current.value)
}

</script>



<style lang="less" scoped>
// 底部立即购买
.example-body {
	padding: 0;
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
}

.goods-carts {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	position: fixed;
	left: 0;
	right: 0;
	/* #ifdef H5 */
	left: var(--window-left);
	right: var(--window-right);
	/* #endif */
	bottom: 0;
}

/* 轮播图 */
.swiper-box {
	height: 200px;
}

.swiper-item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 200px;
	color: #fff;
}

.swiper-item0 {
	background-color: #cee1fd;
}

.swiper-item1 {
	background-color: #b2cef7;
}

.swiper-item2 {
	background-color: #cee1fd;
}

.image {
	width: 750rpx;
}

.uni-swiper-dot-box {
	margin: 0 5px;
	margin-bottom: 8px;
}

.image {
	width: 100%;
}

.uni-bg-red {
	background-color: #ff5a5f;
}

.uni-bg-green {
	background-color: #09bb07;
}

.uni-bg-blue {
	background-color: #007aff;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	padding: 20rpx;
}

.example-body-item {

	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin: 15rpx;
	padding: 15rpx;
	height: 60rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	padding: 0 15rpx;
	/* #endif */
	flex: 1;
	border-color: #e5e5e5;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
}

.example-body-item-text {
	font-size: 28rpx;
	color: #333;
}

.example-body-dots {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50px;
	background-color: #333333;
	margin-left: 10rpx;
}

.active {
	border-style: solid;
	border-color: #007aff;
	border-width: 1px;
}
</style>
